<template>
    <div>
      <van-nav-bar title="头条-登录"/>
      <div>
        <!--
          @submit -> 自定义事件(提交事件)

          van-field 输入框(表单一项)
          输入框name属性=“用户名”
          1.表单整体提交时，默认收集一个提交对象
          往后台发送的参数名就是name里志
          {"用户名":”页面值"}
          2.label属性输入框左侧文本
          3.rules属性配置检验规则
            :属性名=“表达式”
            属性名=“字符串”
        -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="user.mobile"
            name="mobile"
            label="手机号"
            placeholder="请输入11位手机号"
            required
            :rules="[{ required: true, message: '请填写手机号', pattern: /^1[3-9]\d{9}$/}]"
          />
          <van-field
            v-model="user.code"
            type="password"
            name="code"
            label="密码"
            placeholder="密码"
            required
            :rules="[{ required: true, message: '请填写密码', pattern: /^\d{6}$/}]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
              :disabled = "isLoading"
              :loading = "isLoading"
              loading-text="正在登录中..."
            >登录</van-button>
          </div>
        </van-form>
      </div>
    </div>

</template>

<script>
// 写需求套路
// 1.html + css
// 2.数据铺设，数据绑定，数据微调
// 3.js交互->事件/正则

//组件使用套路
// 1. 找组件，引组件，用组件(标签和js复制)

// 目标1：实现顶部导航->自定义样式
// 目标2：实现表单组件->读、改、加
// 目标3：收集值以后，调用接口->查看登录接口
// 目标4：点击登陆后给用户提示(正在登录中)
import {loginAPI} from '@/api'
import {setToken} from '@/utils/token'
import { Notify } from 'vant';

export default {
  data() {
    return {
      user: {
        mobile: '', //手机号
        code: '', // 验证码(密码-必须是246810，后台规定死的)
      },
      isLoading: false //登录默认不加载
    };
  },
  methods: {
    async onSubmit(values) {
      console.log('submit', values);
      console.log(this.user);

      // 状态设置为true
      this.isLoading = true

      try{
        /* const res = await loginAPI({
          mobile: this.user.mobile,
          code: this.user.code
        }) */
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登录成功' });
        setToken(res.data.data.token)

        //跳转一定要写到最后->尽量延迟最后执行
        // push压栈（产生历史记录）, replace 替换(不会产生历史记录)
        this.$router.replace({
            path: '/layout/home' // 路由规则里的/layout没有重定向，直接这里写全就行
        })
      }catch (err) {
        Notify({ type: 'danger', message: '账号或密码错误' });
      }


      // 状态变回
      this.isLoading = false
    },
  },
};
</script>

<style scoped lang="less">
/*此类名是van-nav-bar组件内根标签*/
/*.van-nav-bar {
  background: #007bff;

}
!*此选择器名字是van-nav-bar组件内标签 scope尝试把此选择器后属性选择器匹配当前页面标签(选不中组件内部的)*!
!* /deep/ 会把属性选择器加到前面(用后代选择器的方式往里找匹配的类名)*!
!* 结论：要修改组件内样式,如果用了scope,需要在选择器前加deep*!
/deep/ .van-nav-bar__title {
  color: white;
}*/
</style>
